<template>
  <div>
    <!-- 页面区域 -->
    <div class="page-view">
      <div style="display: flex; gap: 10px; margin-bottom: 20px">
         <el-input
          v-model="queryParam.title"
          style="width: 240px"
          placeholder="Please input"
        >
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="primary" @click="handleEditClick">新增</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="宠物名称" align="center" />
        <el-table-column prop="cover" label="图片" align="center" >
           <template #default="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.cover" fit="fill" />
           </template>
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" align="center" />
        <el-table-column prop="petTypeName" label="类型" align="center" />
        <el-table-column prop="description" label="描述" align="center" show-overflow-tooltip/>
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column prop="operation" label="操作" fixed="right">
          <template #default="scope">
            <el-button @click="handleEditClick(scope.row)">编辑</el-button>
            <el-button type="danger" @click="confirmDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件，使用 Element Plus 的 Pagination 组件 -->
      <el-pagination style="margin-top: 20px" v-model:current-page="pagination.page" v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]" :size="size" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :pager-count="5" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 弹窗区域 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogForm.id ? '编辑' : '新增'" width="700">
      <el-form :model="dialogForm" :label-width="150" size="large">
        <el-form-item label="宠物名称">
          <el-input v-model="dialogForm.title" placeholder="请选择宠物名称" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="dialogForm.nickName" placeholder="请选择宠物昵称" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="dialogForm.sex" placeholder="请选择宠物性别">
            <el-option label="雄性" :value="true" />
            <el-option label="雌性" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="dialogForm.petType" placeholder="请选择宠物类别">
            <el-option v-for="item in petTypeList" :key="item.id" :label="item.title" :value="item.id" />
            <!-- <el-option label="小狗" :value="false" /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="dialogForm.petTag" multiple placeholder="请选择宠物标签">
            <el-option v-for="tagItem in petTagList" :key="tagItem.id" :label="tagItem.title" :value="tagItem.id" />
            <!-- <el-option label="小狗" :value="false" /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
            :on-change="handleChangFile">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="宠物简介">
          <el-input v-model="dialogForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="handleEdit"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import * as petApi from "@/api/pet.js";
import * as commonApi from "@/api/common.js";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData = ref([]);
const dialogFormVisible = ref(false);
const queryParam = ref({ title: "" });
const dialogForm = ref({
  id: "",
  title: "",
  nickName: "",
  sex: "",
  description: "",
  cover: "",
  petType: "",
  petTag: [],
});
const pagination = ref({
  page: 0,
  size: 10,
  total: 0,
});
const getTableData = async () => {
  const params = {
    page: pagination.value.page,
    size: pagination.value.size,
    title: queryParam.value.title,
  };
  const res = await petApi.getPageData(params);
  console.log(res);
  tableData.value = res.data.records;
  pagination.value.total = res.data.total;
};

const handleSearch = () => {
  pagination.value.page = 0
  getTableData();

};

const handleCurrentChange = (e) => {
  pagination.value.page = e;
  getTableData();
};

const handleSizeChange = (e) => {
  pagination.value.size = e;
  getTableData();
};

const handleEditClick = (row) => {
  dialogForm.value = {
    id: "",
    name: "",
  };
  if (row) {
    dialogForm.value = {
      id: row.id,
      name: row.title,
    };
  }

  dialogFormVisible.value = true;
};

const handleRemove = () => {
  dialogFormVisible.value = true;
};

const handleEdit = async () => {
  console.log(dialogForm.value);
  const formData = new FormData();
  // 将表单数据添加到formData
  Object.keys(dialogForm.value).forEach((key) => {
    if (key !== "petTag") {
      formData.append(key, dialogForm.value[key]);
    } else {
      formData.append(key, dialogForm.value[key].join(","));
    }
  });

  console.log(formData);
  if (dialogForm.value.id) {
    await petApi.edit(formData);
  } else {
    await petApi.add(formData);
  }
  dialogFormVisible.value = false;
  getTableData();
};

const confirmDelete = (row) => {
  ElMessageBox.confirm("确定要删除该数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      await petTypeApi.remove(row.id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const imageUrl = ref();
const handleChangFile = (file, fileList) => {
  imageUrl.value = URL.createObjectURL(file.raw);
  dialogForm.value.cover = file.raw;
  console.log(file);
  console.log(fileList);
};

const petTagList = ref([]);
const petTypeList = ref([]);
onMounted(async () => {
  getTableData();
  const tagRes = await commonApi.getPetTagList();
  const typeRes = await commonApi.getPetTypeList();
  petTagList.value = tagRes.data;
  petTypeList.value = typeRes.data;
  console.log(petTypeList.value);
});
</script>

<style scoped lang="scss">
.page-view {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
</style>
